<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="s" uri="http://www.sweet.org/tags" %>

<link rel="stylesheet" href="<s:url value='/resources/vendor/jquery/footable/footable.core.css'/>" type="text/css" />
<script src="<s:url value='/resources/vendor/libs/template.js'/>"></script>
<script src="<s:url value='/resources/vendor/jquery/toaster/jquery.toaster.js'/>"></script>
<script src="<s:url value='/resources/vendor/jquery/footable/footable.all.min.js'/>"></script>
<script src="<s:url value='/resources/js/controller/jspmode/beanlist.js'/>"></script>	

<div class="app-content m-n h-full">
    
<!-- hbox 横向布局 -->
<div class="hbox hbox-auto-xs bg-light">
	<div class="col w-lg lt b-r">
    	<div class="vbox">
      		<div class="wrapper"><div class="h4">Bean CRUD</div></div>
	      	<div class="wrapper b-t m-t-xxs">
	        	<div class="input-group">
	          		<span class="input-group-addon input-sm"><i class="fa fa-search"></i></span>
	          		<input id="filter" type="text" class="form-control input-sm" placeholder="search user">
	        	</div>
	      	</div>
	      	<div class="row-row hidden-xs">	      
           		<div class="padder">
             		<div class="list-group">
             			<c:forEach items="${orglist}" var="org" varStatus="status">
		                <a id="${org.orgId}" class="list-group-item b-l-${orgcolor[status.index%6]} b-l-3x hover-anchor" js-org-label>
		                	<span class="block text-ellipsis zn-font">${org.orgName}</span>
		                  	<small class="text-muted"><fmt:formatDate value="${org.orgCreatedon}" pattern="yyyy-MM-dd hh:mm:ss" /></small>
		                </a>
		                </c:forEach>
             		</div>
           		</div>
	        </div>	        
    	</div>
	</div>

  	<div class="col">
   		<div class="vbox">
      		<div class="wrapper bg-light lt b-b hidden-xs">
      			<span class="text-muted"> Current organizetion <i class="fa fa-fw fa-angle-right text"></i> </span>
      			<span class="zn-font" id="currentorgname"> All of company </span>
      		</div>
      		<div class="row-row"> 
          		<div class="wrapper">
					 <div class="panel panel-default">
					 	<div class="panel-heading">
					    	<button id="add" class="btn m-b-xs w-xxs btn-success">Add</button>
					    	<button id="modify" class="btn m-b-xs w-xs btn-default">Modify</button>
					    	<button id="delete" class="btn m-b-xs w-xs btn-default">Delete</button>
					    </div>
					    <div>
					      	<table class="table m-b-none zn-font" data-filter="#filter" data-filter-minimum="1" data-page-size="7">
						        <thead>
						        	<tr>
						            	<th data-sort-ignore="true" style="width: 20px;"><label class="i-checks m-b-none"><input type="checkbox"><i></i></label></th>
						            	<th data-hide="tiny"> Code </th>
						              	<th data-toggle="true"> Name </th>
						              	<th data-hide="tiny,medium"> Org Name </th>
						              	<th data-hide="tiny,medium"> Role </th>
						              	<th> Mobile </th>
						              	<th data-hide="tiny"> Status </th>
						        	</tr>
						        </thead>
						        <tbody id="tbody"></tbody>
						        <script id="tpl" type="text/html">	
									{each userlist}						        	
									<tr>
										<td><label class="i-checks m-b-none"><input type="checkbox" name="userId" value="{$value.userId}"><i></i></label></td>
						              	<td>{$value.userCode}</td>
						              	<td>{$value.userName}</td>
						              	<td>{$value.sweetDemoOrg.orgName}</td>
						              	<td>
						              		{if $value.userRole==2}
						              			<i class="glyphicon glyphicon-user  text-danger-dk"></i> 管理员
						              		{else}
						              			<i class="glyphicon glyphicon-user  text-info-dk"></i> 用户
						              		{/if}
						              	</td>
						              	<td>{$value.userMobile}</td>
						              	<td>
						              		{if $value.userStatus==1}
						              			<span class="label bg-info">Active</span>
						              		{else}
						              			<span class="label bg-light">Disabled</span>
						              		{/if}
						              	</td>
						          	</tr>
									{/each}	
								</script>
						        <tfoot class="hide-if-no-paging">
						        	<tr><td colspan="7" class="text-center">
						            	<ul class="pagination"></ul>
						        	</td></tr>
						        </tfoot>
					    	</table>
					    </div>
					</div>
				</div>
        	</div>    
    	</div>
  	</div> 	
</div>
<!-- /hbox 横向布局 -->

<!-- modal 对话框 -->
<div id="dialog" class="modal fade" aria-hidden="true" style="z-index:1000000">
    <div class="modal-dialog">
		<div class="modal-content"></div>
	</div>
</div>
<!-- /modal 对话框 -->



